<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 房间基本信管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>房间编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="10" style="margin-right: 30px">
          <el-card shadow="hover">
            <div class="form-box">
              <div style="color: #20a0ff"> 楼层信息</div>
              <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="所属校区" prop="region">
                  <el-input
                      v-model="form.region"
                      disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="公寓名称" prop="name">
                  <el-input
                      v-model="form.name"
                      disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                  <div>
                    <el-radio v-model="form.type" label="男生公寓" border disabled> 男生公寓</el-radio>
                    <el-radio v-model="form.type" label="女生公寓" border disabled>女生公寓</el-radio>
                  </div>
                </el-form-item>
                <el-form-item label="楼层数" prop="floor">
                  <el-input v-model="form.floor" disabled></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div class="form-box">
              <el-form :rules="rules" :model="formDate" label-width="80px">
                <el-form-item label="房间号" prop="region">
                  <el-input
                      v-model="formDate.name"
                      placeholder="401  如楼层+房号"
                  ></el-input>

                </el-form-item>
                <el-form-item label="所属楼层" prop="name">
                  <el-input
                      v-model="form.floor"
                      disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                  <div>
                    <el-radio v-model="form.type" label="男生公寓" border disabled>男生公寓</el-radio>
                    <el-radio v-model="form.type" label="女生公寓" border disabled>女生公寓</el-radio>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">提交</el-button>
                  <el-button @click="onReset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import request from "../../utils/request";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

export default {
  name: "AddRoom",
  setup() {
    const root = "/building/";
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const rules = {
      name: [{required: true, message: "请输入房间名", trigger: "blur"}],
    };
    const formRef = ref(null);
    var form = reactive({
      sid: "",
      region: "",
      name: "",
      type: "",
      floor: "",
    });
    if (route.query.id) {
      request.get(root + route.query.id).then((res) => {
        form.sid = route.query.id;
        form.region = res.data.region;
        form.name = res.data.name;
        form.type = res.data.type;
        form.floor = res.data.floor;
      });
    }

    var formDate = reactive({
      buildingId: "",
      name: "",
      floor: "",
    });

    // 提交
    const onSubmit = () => {
      formDate.buildingId = form.sid;
      formDate.floor = form.floor;
      // 表单校验
      // formRef.value.validate((valid) => {
      //   if (valid) {
      request({
        url: "/room",
        method: "POST",
        data: formDate,
      }).then((res) => {
        if (res.code != null) {
          ElMessage.error(res.msg);
        } else {
          ElMessage.success("提交成功！");
          // 关闭当前页面的标签页;
          store.commit("closeCurrentTag", {
            $router: router,
            $route: route,
          });
        }
        router.push("/admin/roomBed");
      });
      // } else {
      //   return false;
      // }
      // });
    };
    // 重置
    const onReset = () => {
      formRef.value.resetFields();
    };

    return {
      rules,
      formRef,
      form,
      formDate,
      onSubmit,
      onReset,
    };
  },
};
</script>